<script setup>
import VueChart from "@/components/VueChart.vue";
import { ref, onMounted } from "vue";

// 图表数据
const chartData = ref([]);

// 图表配置
const option = ref({
  backgroundColor: "transparent",
  color: [
    "#37a2da",
    "#32c5e9",
    "#9fe6b8",
    "#ffdb5c",
    "#ff9f7f",
    "#fb7293",
    "#e7bcf3",
    "#8378ea",
  ],
  tooltip: {},
  toolbox: {
    show: false,
  },
  series: [
    {
      name: "业务警种",
      type: "pie",
      radius: [0, 100],
      label: {
        normal: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      data: [], // 初始为空数组
      itemStyle: {
        normal: {
          borderWidth: 0,
          borderColor: "transparent",
        },
      },
    },
  ],
});

// 更新图表数据
const updateChart = (data) => {
  chartData.value = data;
  option.value.series[0].data = data;
};

// 模拟接口调用
const fetchData = async () => {
  try {
    // 这里模拟异步请求
    const mockData = [
      { value: 20, name: "国宝" },
      { value: 30, name: "治安" },
      { value: 25, name: "rose3" },
      { value: 25, name: "rose4" },
      { value: 20, name: "rose5" },
    ];

    // 模拟接口延迟
    await new Promise((resolve) => setTimeout(resolve, 500));
    updateChart(mockData);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <vue-chart :options="option" />
</template>

<style scoped lang="scss"></style>
